<template>
  <div class="doc-show">
    <div v-if="mode==0">
      <pre>{{str}}</pre>
    </div>
    <a-layout v-else>
      <a-layout-sider
        v-if="menuFlag"
        v-model:collapsed="collapsed"
        collapsible
        id="sider-menu"
        :trigger="null"
        :collapsedWidth="40"
      >
        <a-tooltip>
          <template #title>点击{{collapsed?'展开':'折叠'}}</template>
          <div
            :class="collapsed?'logo2':'logo'"
            @click="toggleCollapsed"
          >
            <component :is="$antIcons[icon]" />
          </div>
        </a-tooltip>
        <sub-menu
          mode="inline"
          :sourceData="menu.children"
          :callBackTag="true"
          @linkClick="(item)=>openMarkdownRouter(item)"
          :defaultSelectKeys="defaultSelectKeys"
        ></sub-menu>
      </a-layout-sider>
      <a-layout :style="{ marginLeft: layOutMarginLeft }">
        <!-- <a-layout-header> -->
        <a-layout-content>
          <h2>当前文件路径：{{path?path:'（未打开文件）'}}</h2>
          <div
            v-if="!str"
            class="empty-md"
          >当前未打开文档</div>
          <v-md-editor
            v-else-if="mode==1"
            mode="preview"
            v-model="str"
          ></v-md-editor>
          <iframe
            v-else-if="mode==2 && doctype==2"
            :src="path"
            ref="iframe"
            width="100%"
            height="100%"
            scrolling="no"
            class="iframe-main"
          ></iframe>
          <div v-else>
            <pre>{{str}}</pre>
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import axios from 'axios'
import {findFirstFieldvalueInTree, setTreeKey} from '@/assets/js/tree.js'
import SubMenu from '@/components/SubMenu'
import {docSource} from '@/assets/js/contentSettings.js'

const layOutMarginLeftArr = ['200px','40px']

export default {
  props:{
    /** 文档类型：1markdown文档，2html文档，3 */
    doctype:{
      type:Number,
      default:1
    },
    /** 展示模式：0不使用额外组件直接展示源文档（内嵌），1使用内置markdown组件展示，2使用内置html组件展示 */
    mode:{
      type:Number,
      default:1
    },
    /** 文档地址 */
    docpath:{
      type:String,
      default:''
    },
    /** 自定义文档菜单 */
    sourceMenu:{
      type:Object,
      default:()=>{}
    },
    /** 是否使用侧边栏菜单 */
    menuFlag:{
      type:Boolean,
      default:false
    }
  },
  components:{
    SubMenu
  },
  setup() {
    
  },
  data() {
    //直接获取public目录中的md文件，此种方式若是引用public中的资源，会导致重复打包，资源较大，此处保留这种动态引入的写法，供其他地方参考(vue.config.js需要配置)
    // const files = require.context('../../public/documents', true, /\.md$/);
    // var filesMDNames = files.keys();

    //获取内容设置里面的目录
    var menu = {};
    if(this.menuFlag){
      if(this.sourceMenu && (this.sourceMenu.length || this.sourceMenu.key)){
        menu = this.sourceMenu;
      }
      else{
        if(this.doctype==1){
          menu = docSource.getData()?.markdown;
        }
        else{
          menu = docSource.getData()?.html;
        }
      }
      menu = setTreeKey(menu)
    }
    
    var defaultSelectKeys = [''];
    if(this.docpath){
      let item = findFirstFieldvalueInTree(menu, 'path', this.docpath)
      defaultSelectKeys = [item.key]
    }
    var icon = 'FileMarkdownOutlined';
    if(this.doctype==1) icon = 'FileMarkdownOutlined';
    else if(this.doctype==2) icon = 'Html5Outlined';
    return {
      menu,
      icon,
      defaultSelectKeys,
      str:'',
      path: decodeURIComponent(this.docpath ? this.docpath:'') ,
      collapsed:false,
      layOutMarginLeft: this.menuFlag ? layOutMarginLeftArr[0] : 0,
      layOutMarginLeftArrIndex:0
    }
  },
  mounted(){
    if(this.path && this.path!=''){
      this.openMarkdown(this.path);
    }
  },
  methods:{
    openMarkdownRouter(item){
      //不用encodeURI的原因是，这是一个单独的参数，避免被识别为路由的一部分
      let urlPath = encodeURIComponent(item.path)
      this.$router.push(`${this.$route.path}?docpath=${urlPath}&doctype=${this.doctype}`)
      this.openMarkdown(item.path)
      this.defaultSelectKeys = [item.key]
    },
    openMarkdown(path){
      this.path = path
      axios.get("/"+path).then(res=>{
        this.str = res.data
      }).catch(err=>{
        this.$message.error("获取文章资源失败:"+err)
      })
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
      this.layOutMarginLeft = layOutMarginLeftArr[this.layOutMarginLeftArrIndex = this.layOutMarginLeftArrIndex==1?0:1];
    }
  }
}
</script>

<style>
.doc-show {
  margin-top: 64px;
}
#sider-menu {
  background: transparent;
  overflow: auto;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 64px;
  bottom: 0;
}
.logo {
  /* height: 32px; */
  /* background: rgba(255, 255, 255, 0.2); */
  background: transparent;
  /* margin: 5vh; */
  margin-bottom: 15vh;
  text-align: center;
  font-size: 10vh;
}
.logo2 {
  background: transparent;
  font-size: 200%;
  /* margin: 2vh; */
  margin-bottom: 6vh;
  text-align: center;
}
h2 {
  margin: 4px;
}
.empty-md {
  text-align: center;
  margin: 15%;
  font-size: 50px;
}
.iframe-main {
  height: 100vh;
}
</style>